<template>
  <div class="chat">
    <div class="chat-title">
      <img
        @click="$router.back()"
        src="https://image-mall.gxptkc.com/m/resources/chat/back.png"
        alt=""
      />
      <h3>{{ storeMsg.storeName }}</h3>
      <span
        @click="
          $router.push({ path: `/store?storeid=${$route.query.storeid}` })
        "
        >店铺</span
      >
    </div>
    <div class="chat-content">
      <ul class="me">
        <li v-for="(item, index) in meChat" :key="index">
          <span>{{ item }}</span>
        </li>
      </ul>
    </div>
    <div class="chat-footre">
      <input
        type="text"
        placeholder="请输入您要咨询的问题"
        @keyup.enter="toChat"
        v-model="text"
      />
      <img
        src="	https://image-mall.gxptkc.com/m/resources/chat/expression.png
"
        alt=""
      />
      <img
        src="https://image-mall.gxptkc.com/m/resources/chat/more_options.png"
        alt=""
      />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      storeMsg: "",
      text: "",
      meChat: [],
    };
  },
  async created() {
    let res = await this.axios.get(
      `https://m-mall.gxptkc.com/v3/seller/front/store/detail?storeId=${this.$route.query.storeid}`
    );
    this.storeMsg = res.data.data;
  },
  methods: {
    toChat() {
      this.meChat = [this.text, ...this.meChat];
      this.text = "";
    },
  },
};
</script>
<style lang="scss" scoped>
.chat {
  background-color: rgb(245, 245, 245);
  width: 100vw;
  height: 100vh;
  position: relative;
  .chat-title {
    height: 45rem;
    background-color: #fff;
    box-sizing: border-box;
    padding: 10rem 7rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    img {
      width: 10rem;
    }
    h3 {
      font-size: 18rem;
      color: #2d2d2d;
    }
    span {
      padding: 2rem 8rem;
      color: #fefefe;
      font-size: 13rem;
      font-weight: bold;
      border-radius: 10rem;
      background: linear-gradient(
        128deg,
        #fed600,
        #ff5d00 0,
        #fc7100 0,
        #fc1c1c
      );
    }
  }
  .chat-content {
    ul.me {
      li {
        display: flex;
        justify-content: right;
        margin: 10rem 0;
        margin-right: 10rem;
        span {
          padding: 10rem 20rem;
          border-radius: 20rem;
          background-color: skyblue;
        }
      }
    }
  }
  .chat-footre {
    height: 50rem;
    width: 100vw;
    background-color: #fff;
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 10rem 8rem;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    input {
      width: 75vw;
      height: 30rem;
      border: none;
      background-color: rgb(245, 245, 245);
      border-radius: 20rem;
      text-indent: 10em;
      //   color: #eee;
    }

    input::-webkit-input-placeholder {
      color: #ccc;
    }

    img {
      width: 25rem;
    }
  }
}
</style>